<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/index.css">
</head>

<body>

  <section id="todoapp" class="todoapp">
    <myheader @inpvalue="addTodo"></myheader>
    <mylist :todos="todos" @dbl-click="aaaa" @save-edit="saveEdit" :currentediting="currentEditing"
      @removetodo="removeTodo"></mylist>
    <myfotter :leftcount="leftCount" @delete-all-done="removeAllDone"></myfotter>

  </section>
  <script src="js/vue.js"></script>

  <script>
    //   1、把header  部分提取出来 
    var myheader = {
      template: `
            <header class="header">
                <h1>todos</h1>
                <input placeholder="What needs to be done?" @keyup.enter="addToParent" class="new-todo">
            </header>
            `,
      methods: {
        //1.1  把用户输入的数据传递到父组件中去
        addToParent(event) {
          var todoText = event.target.value.trim()
          if (!todoText.length) {
            return
          }
          this.$emit("inpvalue", todoText)
        }
      }
    }
    // 2.1  把 展示数据列表提取出来
    // 2.2 把父组件中的todos 传递过来  子组件接收到父组件传递过来的数据 进行渲染
    var mylist = {
      props: ["todos", "currentediting"],
      template: ` 
            <section class="main">
               <input v-model="toggleStat1" id="toggle-all" type="checkbox" class="toggle-all">
                <label for="toggle-all">Mark all as complete</label>
                <ul class="todo-list">
                        <li v-for="(item, index) in todos" 
                        v-bind:class="{completed: item.completed, editing: item === currentediting}">
                            <div class="view">
                                <input type="checkbox" class="toggle" v-model="item.completed">
                                <label @dblclick="doubleMethods(item)">{{item.title}}</label>
                                <button class="destroy" @click="removeTodoParent(index, $event)"></button>
                            </div>
                            <input class="edit" @keyup.enter="saveEdit(item, index, $event)" :value="item.title" @keyup.esc="currentediting = null">
                        </li>
                </ul>
            </section>
            `,
      methods: {
        //  3.1 删除操作
        //  3.2 把需要删除的id 传递给父组件过来
        removeTodoParent(index) {
          this.$emit("removetodo", index)
        },
        saveEdit(item, index, event) {
          var editText = event.target.value.trim()
          this.$emit("save-edit", editText, item, index)
        },
        doubleMethods(item) {
          this.$emit("dbl-click", item)
        }
      },
      computed: {
        toggleStat1: {
          get() {
            return this.todos.every(item => item.completed)
          },
          set(val) {
            this.todos.forEach(todo => todo.completed = val)
          }
        },
      },
    }


    var myfotter = {
      props: ['leftcount'],
      template: `
            <footer class="footer">
            <span class="todo-count"><strong>{{leftcount}}</strong> item left</span>
            <button class="clear-completed" @click="deleteAll">Clear completed</button>
        </footer>
            `,
      methods: {
        deleteAll() {
          this.$emit("delete-all-done")
        }
      }
    }

    var vm = new Vue({
      el: "#todoapp",
      data: {
        currentEditing: null,
        todos: [{
          id: 1,
          title: '吃饭',
          completed: false
        }, {
          id: 2,
          title: '睡觉',
          completed: false
        }, {
          id: 3,
          title: '打豆豆',
          completed: true
        }]
      },
      methods: {
        addTodo(todoText) {


          const lastTodo = this.todos[this.todos.length - 1]
          const id = lastTodo ? lastTodo.id + 1 : 1

          // // 当数组发生变化，则绑定渲染该数组的视图也会得到更新
          this.todos.push({
            id,
            title: todoText,
            completed: false
          })

          // // 清空文本框
          event.target.value = ''
        },
        // 删除任务项
        removeTodo(delIndex) {
          this.todos.splice(delIndex, 1)
        },
        // 保存编辑项
        saveEdit(editText, item, index) {
          console.log(item, index, '-------------')
          // 1. 拿到文本框中的数据
          //    非空校验
          //    如果为空，则直接删除这个 item
          //    如果不为空，则修改任务项的 title 数据


          // 程序员要具有工匠精神：优化简写
          // !editText.length ?
          //   this.todos.splice(index, 1) :
          //   item.title = editText

          if (!editText.length) {
            // 将元素直接从数组中移除
            return this.todos.splice(index, 1)
          }

          // 2. 将数据设置到任务项中
          item.title = editText

          // 3. 去除 editing 样式
          this.currentEditing = null
        },
        // 删除所有已完成任务项
        removeAllDone() {
          // 找到所有已完成的任务项，把其删除。错误的写法
          // this.todos.forEach((item, index) => {
          //   if (item.completed) {
          //     // 已完成
          //     console.log(item.title)
          //     this.todos.splice(index, 1)
          //   }
          // })

          // 把所有需要保留的数据过滤出来，然后重新赋值给 todos
          this.todos = this.todos.filter(item => !item.completed)

          // 如果想要就在遍历的过程去删除，则可以使用 for 循环
          // 没删除一个，我们可以控制让索引 --
          // for (let i = 0; i < this.todos.length; i++) {
          //   if (this.todos[i].completed) {
          //     this.todos.splice(i, 1)
          //     i--
          //   }
          // }
        },
        aaaa(item) {
          console.log(123)
          this.currentEditing = item
        }
      },
      computed: {

        leftCount: function () {
          return this.todos.filter(item => !item.completed).length
        },

      },
      components: {
        myheader,
        mylist,
        myfotter
      }
    })
  </script>
</body>

</html>